<template>
    <div class="app-container">

        <el-row>
            <el-col :span="4">
                <el-input clearable @clear="search()" v-model="pageDto.where.name" placeholder="请输入行业名称"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button icon="el-icon-delete" @click="deleteItem()" type="danger">清空</el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="add()" type="success" icon="el-icon-circle-plus">添加</el-button>
            </el-col>
                
        </el-row>

        <el-table :data="industryList" stripe style="width: 100%">
            <el-table-column prop="name" label="行业名称">
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期">
            </el-table-column>
            <el-table-column label="操作">

                <template slot-scope="scope">
                    <el-button @click="update(scope.row)" type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    <el-button @click="del(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
        <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageDto.now" :page-sizes="[5, 15, 50, 100]" :page-size="pageDto.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <el-dialog title="添加行业" :visible.sync="dialogFormVisible">
      <el-form :model="industry">
        <el-form-item label="行业名称">
          <el-input v-model="industry.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addIndustry()">确 定</el-button>
      </div>
        </el-dialog>

        <el-dialog title="修改行业" :visible.sync="dialogFormVisible1">
      <el-form :model="industry">
        <el-form-item label="行业名称">
          <el-input v-model="industry.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addIndustry()">确 定</el-button>
      </div>
        </el-dialog>

    </div>
</template>
<script>
import { page, update, add ,drop } from "@/api/industry";
export default {
    data() {
        return {
            dialogFormVisible:false,
            dialogFormVisible1:false,
            pageDto: {
                now: 1,
                size: 5,
                where: {
                    name: "",
                },
            },
            total: 0,
            industryList: [],
            industry: {
                id:"",
                name:"",
                createTime:"",
            }
        };
    },
    methods: {
        del(data){
            console.log(data);
            this.$confirm("是否确认删除","提示",{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(res => {
                drop(data).then(res => {
                    if(res.code == 200) {
                        this.search();
                    }
                    this.$message({
                        message: res.ok?"删除成功":"删除失败",
                        type: res.ok ? "success" : "error",
                    });
                }); 
                this.search()
            });
            
            // //与服务端交互
            // drop(id).then(res=>{
            //     if(res.code==0){
            //         this.$message({
            //             type:res.ok?"success":"error",
            //             message:res.ok?"删除成功":"删除失败",
            //         })

            //         this.search();
            //     }
            // })
        },
        search() {
            page(this.pageDto).then((res) => {
                this.industryList = res.list;
                this.pages = res.pages;
                this.total = res.total;
            });
        },
        handleSizeChange(size) {
            this.size = size;
            this.search();
        },
        handleCurrentChange(now) {
            this.pageDto.now = now;
            this.search();
        },
        deleteItem() {
            this.pageDto.where.name = "";
            this.search();
        },
        add() {
            this.industry = {};
            this.dialogFormVisible = true;
            this.search();
        },
        addIndustry() {
             if (this.industry.id){
                 update(this.industry).then((res) => {
                     this.dialogFormVisible1 = false;
                     this.pageDto.now = 1;
                     this.search();
                     this.industry = {};
                 });
             } else {
                add(this.industry).then((res) => {
                     this.pageDto.now = 1;
                     this.search();
                     this.industry = {};
                     this.dialogFormVisible = false;
                     this.$message({
                         msg:res.message,
                         type:res.ok?'success':'error'
                     });
                 });
             }
        },
        update(row) {
            this.dialogFormVisible1 = true;
            this.industry = row;
            console.log(row)
        }
    },
    created() {
        this.search();
    },
};
</script>
<style lang="">

</style>
  